<template>
	<view>
		<!-- 买家信息 -->

		<!-- <view class="sellerInformation" @click="TraderInfoDel()"  :style="{ 'background-image': 'url(' + https+sellerInformationList.banner+ ')' }">
			<view class="banner">
				<image :src="https+sellerInformationList.storePhotos" mode="" class="logo"></image>
				<view class="bannCenter">
					<view class="text1">{{sellerInformationList.traderName}}</view>
					<view class="text2">在售车型{{count}}个</view>
				</view>
				<image src="../../static/authentication.png" mode="" class="logo2"></image>
			</view>
			<view class="textNum">
				<view class="textNumdel">
					<view class="ddd">地址:{{sellerInformationList.storeAddress}}</view>
					</view>
				<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</view>
			
		</view>
		<view> -->
		<view class="sssss">
			<view class="topbanner" @click="TraderInfoDel()">
				<view class="topbannerT">
					<view class="topbannerTL">
						<image :src="https+sellerInformationList.storePhotos" mode="" class="logo"></image>
					</view>
					<view class="topbannerTR">
						<view class="tits">{{sellerInformationList.traderName}}</view>
						<view class="tits1" >
							<view> <image src="../../static/dz.png" mode="" id="dz"></image>地址：{{sellerInformationList.storeAddress}}</view>
							<view>></view>
						</view>
					</view>
				</view>
				<view class="topbannerB" @click.stop="stopClickSelect">
					<view class="topbannerBR">
						<view :class="typeNum==true?'active':''" id="jianjie">
								公司简介：{{sellerInformationList.introduction}}
								
								
						</view>
						<image src="../../static/xiasanjiao.png" mode="" class="immmm" :id="typeNum!=true?'trans':''"></image>
						
					</view>
				</view>
			</view>

			<view class="topbannerBB">

			</view>
		</view>

		<!-- 	<view class="center">
			<view class="zs">
				<navigator :url="'/pagesB/modelsOnSale/modelsOnSale?id='+ traderId">
				<image class="image" src="../../static/zscx.png" mode=""></image>
					<view @click="modelsOnSale">在售车型</view>
				</navigator>
			</view>
			<view class="zs">
				<navigator :url="'/pagesB/company/company?id='+ traderId">
				<image class="image" src="../../static/gsjj.png" mode=""></image>
				<view>公司简介</view>
				</navigator>
			</view>
		</view> -->

		<view class="tab">
			<!-- tabNav -->
			<view class="tab-nav">
				<u-tabs style="width: 100%;" :list="tabList" :bar-width="200" :is-scroll="false" active-color="#002B56"  :current="current" @change="change"></u-tabs>
			</view>
			<!-- tabList -->
			<view class="tab-list">
				<view class="block" v-if="current == 0">
					<block v-if="list.length>0">
						<view class="tab-list-li" v-for="(item,index) in list" :key="index">
							<navigator :url="`/pages/carInfo/carInfo?item=${encodeURIComponent(JSON.stringify(item))}`"
								hover-class="none">
								<tab-sjztitem :item="item"></tab-sjztitem>
							</navigator>
						</view>
						<view class="qqxl">
							<u-loadmore :status="status" :load-text="loadText" />
						</view>
					</block>
					<view v-else>
						<null></null>
					</view>
				</view>
			</view>
			
			<view class="tab-list">
				<view class="block" v-if="current == 1" style="display: flex;justify-content: space-between;
		flex-wrap: wrap;">
					<block v-if="list.length>0">
						<view class="tab-list-li" v-for="(item,index) in list" :key="index">
							<navigator :url="`/pages/carInfo/carInfo?item=${encodeURIComponent(JSON.stringify(item))}`"
								hover-class="none">
								<tab-sjitem :item="item"></tab-sjitem>
							</navigator>
						</view>
						<view class="qqxl">
							<u-loadmore :status="status" :load-text="loadText" />
						</view>
					</block>
					<view v-else>
						<null></null>
					</view>
				</view>
			</view>
		</view>
		<view class="info-footer">
			<view class="dj" @click="gotel()">
				<view class="wm">
					<image src="../../static/zxdj.png" mode=""></image>
					<text style="color: #fff;">联系我们</text>
				</view>
			</view>
		</view>
	</view>
	
	
	
	</view>
</template>

<script>
	import API from "@/api/index.js"
	export default {
		data() {
			return {
				traderId: '',
				sellerInformationList: '',
				https: getApp().globalData.picturePath,
				//下拉
				active: 1,
				list: [],
				newList: [],
				page: 1,
				limit: 10,
				count: '',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				latitude: '35.227318', //纬度，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系
				longitude: '114.113027', //	经度，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系
				storeName: '东娄庄村', //这块市你坐标值的目的地 名字也可以自定义
				address: '河南省新乡市延津县榆林乡东娄庄村', //这块市地址的详细描述可以自定义
				tabList: [{
					name: '主推车型'
				}, {
					name: '在售车型'
				}],
				current: 0,
				ownerPhone:'18042321312',
				typeNum:true
			}

		},
		onLoad(option) {

			this.traderId = option.traderId;
			this.TraderInfo();
			this.getCarList('1');

		},
		methods: {
			stopClickSelect(){
				console.log(123)
				this.typeNum = !this.typeNum;
			},
			gotel(){
				let that= this;
				if(that.sellerInformationList.phone==''){
					this.$u.toast('暂无联系方式');
				}else{
					uni.makePhoneCall({
					    phoneNumber: that.sellerInformationList.phone //仅为示例
					});
				}
			},
			change(index) {
				this.current = index;
				this.page = 1
				if(index==0){
					this.getCarList('1');
				}else{
					this.getCarList('');
				}
			},
			TraderInfo() {
				API.TraderInfo({
					'traderId': this.traderId
				}).then(res => {
					console.log(res.data)
					this.sellerInformationList = res.data;

				})
			},
			TraderInfoDel() {
				let that = this;
				wx.getLocation({
					type: 'gcj02',
					success(res) {
						
						const latitude = res.latitude
						const longitude = res.longitude
						const speed = res.speed
						const accuracy = res.accuracy
						wx.openLocation({
							latitude: Number(that.sellerInformationList.lat), //纬度，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系
							longitude: Number(that.sellerInformationList.lng), //	经度，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系
							storeName: that.sellerInformationList.traderName, //这块市你坐标值的目的地 名字也可以自定义
							address: that.sellerInformationList.storeAddress, //这块市地址的详细描述可以自定义
							success: function() {
								console.log('成功的回调success');
							}
						});


					},
					fail(error) {
						wx.showModal({
							title: '温馨提示',
							content: '小程序将获取您的授权用来显示位置信息',
							success(res) {
								if (res.confirm) {
									console.log('点击了确认');
									wx.openSetting({
										success(res) {
											console.log(res.authSetting)
											res.authSetting = {
												"scope.userInfo": true,
												"scope.userLocation": true
											}
										}
									})
								} else {
									console.log('点击了取消')
								}
							}
						})

					}
				})
			}

			//获取车辆信息
			,
			getCarList(num) {
				const data = {
					page: this.page,
					limit: this.limit,
					traderId: this.traderId,
					traderMainPush: num
				}
				API.usedCarListt(data).then(res => {
					this.count = res.count;
					this.list = res.data;
					console.log(res.data)
				})
			},
		},
		onReachBottom() {
			// console.log(1232131)
			uni.showLoading({
				title: this.status,
			});
			this.page += 1
			var num = ''
			if(this.current==0){
				num = 1
			}else{
				num = ''
			}
			const data = {
				page: this.page,
				limit: this.limit,
				traderId: this.traderId,
				traderMainPush: num
			}
			console.log(data)
			API.usedCarListt(data).then(res => {
				console.log(res.data)

				if (res.data.length != 0) {
					this.list = this.list.concat(res.data)
				}

			})
			this.status = 'loading';

			if (this.page * this.limit >= this.count) {
				this.status = 'nomore';
			} else {
				this.status = 'loadmore';
			}
		},
	}
</script>

<style lang="scss">
	#dz{
		    width: 20rpx;
		    height: 22rpx;
		    margin-right: 10rpx;
	}
	#trans{
		transform: rotate(180deg);
	}
	.topbannerB{
		position: relative;
		
	}
	.immmm{
			width: 20rpx;
			height: 20rpx;
			position: absolute;
			bottom: -38rpx;
			left: 50%;
			margin-left: -10rpx;
	}
	.block{
		    margin-bottom: 145rpx;
	}
	.dj{
		background-color: #002B56;
		margin:  0 32rpx;
		border-radius: 12rpx;
	}
	.topbanner {
		// height: 362rpx;
		width: 100%;
		background: #002B56;
		padding: 32rpx;

		.topbannerT {
			color: #fff;
			height: 130rpx;
			border-bottom: 1px solid rgba(255, 255, 255, 0.30);
			display: flex;
		}

		.topbannerTL {
			width: 98rpx;
			height: 98rpx;
			border-radius: 50%;
			overflow: hidden;
			// background-color: #fff;
			image{
				width: 100%;
				height: 100%;
			}
		}

		.topbannerTR {
			margin-left: 30rpx;

			.tits {
				font-family: PingFangSC-Medium;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.tits1 {
				display: flex;
				justify-content: space-between;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #FFFFFF;
				width: 550rpx;
				margin-top: 20rpx;
			}
		}

		.topbannerB {
			margin-top: 25rpx;
			color: #fff;
			margin-bottom: 55rpx;

			.topbannerBR {
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}

	}
	.active{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			height: 78rpx;
	}
	.sssss{
		position: relative;
	}
	.topbannerBB {
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0 0;
		width: 100%;
		height: 32rpx;
		position: absolute;
		z-index: 111;
		bottom: 0;
	}

	.sellerInformation {
		background-size: 100% 100%;
		box-sizing: border-box;
		height: 270rpx;

		.banner {
			padding: 40rpx;
			display: flex;

			.logo {
				width: 120rpx;
				height: 120rpx;
				margin-right: 40rpx;
			}

			.bannCenter {
				color: #fff;

				.text1 {
					font-size: 35rpx;
				}

				.text2 {
					margin-top: 15rpx;
				}
			}

			.logo2 {
				width: 50rpx;
				height: 20rpx;
				margin-left: 30rpx;
				margin-top: 10rpx;
			}
		}

		.textNum {
			padding: 0rpx 50rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.textNumdel {
			display: flex;

			.ddd {
				color: #fff;
			}
		}

	}

	.center {
		padding: 20rpx 100rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}

	.image {
		width: 150rpx;
		height: 130rpx;
	}

	.zs {
		text-align: center;
		line-height: 50rpx;
	}


	.tab {
		background-color: $uni-bg-color;
		// margin: $uni-widthspace $uni-widthspace 0rpx;
		margin-top: 5rpx;
		border-radius: 10rpx;

		.tab-nav-item-title {
			font-size: 32rpx;
			color: #666;
			font-weight: bolder;
			padding: 20rpx;
		}

		.tab-nav-item-title-active {
			color: #333;
		}

		.tab-nav-item-text {
			font-size: 24rpx;
			color: #999;
			margin-top: 8rpx;
		}

		.tab-nav-item-border {

			margin-top: 12rpx;
			width: 140rpx;
			height: 6rpx;
			background-color: #fff;
		}

		.tab-nav-item-border-active {
			background-color: #0e2a53;
		}

		.tab-list {
			padding: 0 $uni-widthspace;

			.looker-more {
				text-align: center;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #999;
			}

			box-sizing: border-box;

			.tab-list-li {
				border-bottom: 2rpx solid #eee;
				padding: 20rpx 0rpx;
				// box-sizing: border-box;
				// width: 100%;
			}
		}

		.tab-nav {
			display: flex;
			justify-content: space-between;
		}

		.gd {
			margin-right: 25rpx;
			margin-top: 15rpx;
		}
	}

	.block {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.qqxl {
		text-align: center;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.info-footer{
		position: fixed;
		width: 100%;
		bottom: 0px;
		right: 0;
		z-index: 999;
		box-sizing: border-box;
		// background-color: #fff;
		display: flex;
		justify-content:space-around;
		align-items: center;
		background: #fff;
		height: 126rpx;
		view{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			border: 1px solid #002B56;
			border-radius: 5rpx;
			display: flex;
		}
		.wm{
			width: 200rpx;
			margin: auto;
		}
		text{
			padding-left: 10rpx;
		}
		image{
			    width: 35rpx;
			    height: 35rpx;
				margin-top: 26rpx;
		}
		// .car-info-footer-li{
		// 	width: 150rpx;
		// 	height: 100%;
		// 	text-align: center;
		// 	padding: 20rpx 0rpx;
		// 	box-sizing: border-box;
		// 	.car-info-footer-li-text{
		// 		color: #333;
		// 		font-size: 26rpx;
		// 	}
		// }
		// .car-info-footer-item{
		// 	flex: 1;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
		// 	.car-info-footer-btn{
		// 		flex: 1;
		// 		height: 100%;
		// 		color: #fff;
		// 		text-align: center;
		// 	}
		// }
	}
</style>
